<template>
	<div class="dashboard-container">
		<el-card style="height: 120px; margin-bottom: 20px">
			<!-- 给el-form绑定form -->
			<el-form label-width="80px" :model="form" :inline="true">
				<el-form-item>
					<el-input v-model="form.name" placeholder="关键词搜索" clearable />
				</el-form-item>
				<el-form-item>
					<el-select v-model="form.copywritingtypeid" placeholder="文案分类" filterable>
						<el-option v-for="a in reqCategory1" :key="a.id" :label="a.name" :value="a.id"></el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchclick"
					style="margin-left: 12px">筛选</el-button>
				<el-button @click="resetSearch">重置</el-button>
				<el-button @click="addrenyuan" type="success">添加</el-button>
			</el-form>
		</el-card>
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="ID" align="center" width="150">
			</el-table-column>
			<!-- <el-table-column prop="name" label="名称" align="center">
      </el-table-column> -->
			<el-table-column prop="copywritingtypeid" label="分类" align="center" width="150">
				<template slot-scope="scope">
					<el-tag type="success">{{
            scope.row.copywritingtypeid | copywritingtypeidfilter(that)
          }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="content" label="介绍" align="center">
			</el-table-column>
			<el-table-column prop="label" label="标签" align="center">
			</el-table-column>
			<!--      <el-table-column label="轮播图" align="center">-->
			<!--        <template slot-scope="scope">-->
			<!--          <el-carousel>-->
			<!--            <el-carousel-item v-for="(item, index) in scope.row.images">-->
			<!--              <el-image :src="item" fit="fit"></el-image>-->
			<!--            </el-carousel-item>-->
			<!--          </el-carousel>-->
			<!--        </template>-->
			<!--      </el-table-column>-->
			<el-table-column label="轮播图" align="center" width="400">
				<template slot-scope="scope">
					<div class="">
						<el-image :key="index" v-for="(item, index) in scope.row.images"
							style="width: 70px; height: 70px" :src="item" fit="contain"></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="primary" @click="changerenyuan(scope.row)" size="small">修改</el-button>
					<el-button type="danger" @click="deldel(scope.row)" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<Pagination2 :currentPage="this.form.pageNo" :size="this.form.pageSize" :total="total"
			@changelimit="changelimit" @changecurrentPage="changecurrentPage"></Pagination2>
		<add ref="add" @refresh="refresh"></add>
	</div>
</template>

<script>
	import {
		servetypeRecommend,
		delcopywritingdel,
		gettypelist,
	} from "@/api/servetypeIndex";
	import add from "./modules/add";
	export default {
		name: "Dashboard",
		components: {
			add,
		},
		data() {
			return {
				that: this,
				reqCategory1: [],
				form: {
					name: "",
					pageNo: 1,
					pageSize: 15,
				},
				reqCategoryLoaded: false, // 新增标志
				total: 0,
				tableData: [],
			};
		},
		// beforeCreate() {
		//   that = this;
		// },
		filters: {
			copywritingtypeidfilter(val, that) {
				if (that.reqCategoryLoaded) {
					// 检查标志
					const matchingCategory = that.reqCategory1.find(
						(item) => item.id === val
					);
					return matchingCategory ? matchingCategory.name : "";
				}
				return "";
			},
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT = Year + "-" + Moth + "-" + Day;
					// "   " +
					// Hour +
					// ":" +
					// Minute +
					// ":" +
					// Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		methods: {
			searchclick() {
				this.getcouponlist1();
			},
			resetSearch() {
				this.form.name = "";
				this.getcouponlist1();
			},
			addrenyuan() {
				this.$refs.add.add();
			},
			// 子传父:自定义事件
			refresh() {
				this.getcouponlist1();
			},
			async gettypelist() {
				let result = await gettypelist();
				console.log(result);
				if (result.code == 0) {
					this.reqCategory1 = result.data;
					this.reqCategoryLoaded = true; // 设置标志为 true
				}
			},
			async getcouponlist1() {
				let result = await servetypeRecommend(this.form);
				console.log(result);
				if (result.code == 0) {
					if (result.data.data != []) {
						this.tableData = result.data.data;
						this.total = result.data.totalCount;
						this.tableData.forEach((item, index) => {
							// console.log(item.images.split(','));
							if (item.iamges != "") {
								this.$set(item, "images", item.images.split(","));
							}
						});
						console.log("最后", this.tableData);
					}
				}
			},
			changelimit(val) {
				this.form.pageSize = val;
				this.getcouponlist1();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getcouponlist1();
			},
			changerenyuan(val) {
				this.$refs.add.edit(val);
			},
			async deldel(val) {
				let result = await delcopywritingdel({
					id: val.id
				});
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "删除成功",
						type: "success",
					});
					this.getcouponlist1();
				}
			},
		},
		watch: {
			"form.name": {
				handler(newVal) {
					if (newVal == "") {
						this.getcouponlist1();
					}
				},
			},
		},
		mounted() {
			this.getcouponlist1();
			this.gettypelist();
		},
	};
</script>

<style lang="scss" scoped>
	// .dashboard {
	//   &-container {
	//     margin: 30px;
	//   }
	//   &-text {
	//     font-size: 30px;
	//     line-height: 46px;
	//   }
	// }
</style>